<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box{width: 200px;height:100px;background: red}
  </style>
</head>
<body>
  <div id="box">
    <span>1</span>
    <span>2</span>
    <span class="three">3</span>
    <span>4</span>
    <span>5</span>
  </div>
</body>
<script>

  var box = document.querySelector("#box")
  var three = document.querySelector("#box .three")
  
  console.log(box)
  // console.log(box.outerHTML)

  // box.outerHTML = "<p id='"+ box.id +"'>"+ box.innerHTML +"</p>";

  // var p = document.createElement("p");
  // p.innerHTML = box.innerHTML;
  // p.id = box.id
  // box.replaceWith(p);
  
  // var p = document.createElement("p");
  // box.replaceChild( p, three );


  // ======
  
  
  // 克隆
  var div = box.cloneNode(true);
  console.log(div);

  document.body.appendChild(div);
  
  console.log(div === box)

  
</script>
</html>